<template>
	<div class="test-results">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">试验结果</span>
				<img src="../assets/images/icon-close.png" @click="cancel">
			</div>
			<div class="content">
				<div class="c-title justify-content-between">
	            	<span class="fs24 color161D2E" v-if="modelName">{{modelName}}-{{deviceName}}</span>
	            	<div class="flex">
	            		<!-- <div class="btn">
	            			<img src="../assets/images/icon-generate.png">
	            			<span>生成报告</span>
	            		</div> -->
	            		<div class="btn" v-loading="reportLoading" @click="lookReport">
	            			<img src="../assets/images/icon-look.png">
	            			<span>查看报告</span>
	            		</div>
	            		<div class="btn" v-loading="dataLoading" @click="exportFile">
	            			<img src="../assets/images/icon-export.png">
	            			<span>数据导出</span>
	            		</div>
	            	</div>
	            </div>
	            <div class="flex mt18">
	            	<div class="align-item-center">
	            		<span class="fs18 color505971">设备编号：</span>
						<el-select v-model="deviceNo" placeholder="请选择" size="small" @change="getTestResult">
						    <el-option v-for="item in deviceNoData" :key="item.id" :label="item.deviceNo" :value="item.deviceNo">
						    </el-option>
						 </el-select>
	            	</div>
	            	<div class="align-item-center ml47">
	            		<span class="fs18 color505971">阶段过程：</span>
						<el-select v-model="modelState" placeholder="请选择" size="small" @change="getTestResult">
						    <el-option label="装配环节" value="ZPHJ"></el-option>
						    <el-option label="整机测试" value="ZJCS"></el-option>
						    <el-option label="验收试验" value="YSSY"></el-option>
						    <el-option label="例行试验" value="LXSY"></el-option>
						    <el-option label="文档检查" value="DOC"></el-option>
						 </el-select>
	            	</div>
	            </div>
	            <div v-if="modelState == 'YSSY' || modelState == 'LXSY'">
	            	<div class="theader justify-content-between">
		            	<div class="w330">序号</div>
		            	<div class="w875">试验项目</div>
		            	<div class="w990">试验条件</div>
		            	<div class="w990">测试项目</div>
		            	<div class="w875">合格判据</div>
		            	<div class="w990">记录试验条件</div>
		            	<div class="w990">是否合格</div>
		            	<div class="w330">附件</div>
		            	<div class="w990">多媒体记录</div>
		            	<div class="w990">操作终端</div>
		            	<div class="w990">电子签名</div>
		            	<div class="w330">详情</div>
		            </div>
		            <div class="tbodys">
		            	<div class="tbody justify-content-between" v-for="(item, index) in TestResultData" v-loading="listLoading">
			            	<div class="w330">{{index+1}}</div>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.expProject}}</div>
	                            <div class="w875 text-overflow-2 cursor-pointer">{{item.expProject}}</div>
	                        </el-tooltip>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.expCondition}}</div>
	                            <div class="w990 text-overflow-2 cursor-pointer">{{item.expCondition}}</div>
	                        </el-tooltip>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.testProject}}</div>
	                            <div class="w990 text-overflow-2 cursor-pointer">{{item.testProject}}</div>
	                        </el-tooltip>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.testJudge}}</div>
	                            <div class="w875 text-overflow-2 cursor-pointer">{{item.testJudge}}</div>
	                        </el-tooltip>
			            	<div class="w990">{{item.recordTxt}}</div>
			            	<div class="w990">{{item.qualified ? '合格' : '不合格'}}</div>
			            	<div class="w330 color285FE3 text-underline cursor-pointer" v-if="item.attach.code == 'Y' && item.attachIds" @click="lookAttachment(1, item.attachIds)">查看</div>
			            	<div class="w330" v-else>暂无</div>
			            	<div class="w990 color285FE3 text-underline cursor-pointer" v-if="item.media.code == 'Y' && item.mediaIds" @click="lookMedias(item.mediaIds)">查看</div>
			            	<div class="w990" v-else>暂无</div>
			            	<div class="w990">{{item.operatorClient}}<br>{{item.sendDate}}</div>
			            	<div class="w990 color285FE3 text-underline cursor-pointer" v-if="item.signId" @click="lookAttachment(2, item.signId)">查看</div>
			            	<div class="w990" v-else>暂无</div>
			            	<div class="w330 color5379E6 cursor-pointer" @click="lookDetail(item, 5)">详情</div>
			            </div>
		            </div>
	            </div>
	            <div v-else-if="modelState == 'DOC'">
	            	<div class="theader justify-content-between">
		            	<div class="w330">序号</div>
		            	<div class="w875">检查项目</div>
		            	<div class="w990">检查方法</div>
		            	<div class="w875">合格判据</div>
		            	<div class="w990">是否合格</div>
		            	<div class="w330">附件</div>
		            	<div class="w990">多媒体记录</div>
		            	<div class="w990">操作终端</div>
		            	<div class="w990">电子签名</div>
		            	<div class="w330">详情</div>
		            </div>
		            <div class="tbodys">
			            <div class="tbody justify-content-between" v-for="(item, index) in TestResultData" v-loading="listLoading">
			            	<div class="w330">{{index+1}}</div>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.checkProject}}</div>
	                            <div class="w875 text-overflow-2 cursor-pointer">{{item.checkProject}}</div>
	                        </el-tooltip>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.checkMethod}}</div>
	                            <div class="w990 text-overflow-2 cursor-pointer">{{item.checkMethod}}</div>
	                        </el-tooltip>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.testJudge}}</div>
	                            <div class="w875 text-overflow-2 cursor-pointer">{{item.testJudge}}</div>
	                        </el-tooltip>
			            	<div class="w990">{{item.qualified ? '合格' : '不合格'}}</div>
			            	<div class="w330 color285FE3 text-underline cursor-pointer" v-if="item.attach.code == 'Y' && item.attachIds" @click="lookAttachment(1, item.attachIds)">查看</div>
			            	<div class="w330" v-else>暂无</div>
			            	<div class="w990 color285FE3 text-underline cursor-pointer" v-if="item.media.code == 'Y' && item.mediaIds" @click="lookMedias(item.mediaIds)">查看</div>
			            	<div class="w990" v-else>暂无</div>
			            	<div class="w990">{{item.operatorClient}}<br>{{item.sendDate}}</div>
			            	<div class="w990 color285FE3 text-underline cursor-pointer" v-if="item.signId" @click="lookAttachment(2, item.signId)">查看</div>
			            	<div class="w990" v-else>暂无</div>
			            	<div class="w330 color5379E6 cursor-pointer" @click="lookDetail(item, 6)">详情</div>
			            </div>
		            </div>
	            </div>
	            <div v-else>
	            	<div class="theader justify-content-between">
		            	<div class="w330">序号</div>
		            	<div class="w875">测试项目</div>
		            	<div class="w875">测试方法</div>
		            	<div class="w990">合格判据</div>
		            	<div class="w990">数据记录</div>
		            	<div class="w990">记录试验条件</div>
		            	<div class="w990">是否合格</div>
		            	<div class="w330">附件</div>
		            	<div class="w990">多媒体记录</div>
		            	<div class="w990">操作终端</div>
		            	<div class="w990">电子签名</div>
		            	<div class="w330">详情</div>
		            </div>
		            <div class="tbodys">
			            <div class="tbody justify-content-between" v-for="(item, index) in TestResultData" v-loading="listLoading">
			            	<div class="w330">{{index+1}}</div>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.testProject}}</div>
	                            <div class="w875 text-overflow-2 cursor-pointer">{{item.testProject}}</div>
	                        </el-tooltip>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.testMethod}}</div>
	                            <div class="w875 text-overflow-2 cursor-pointer">{{item.testMethod}}</div>
	                        </el-tooltip>
			            	<el-tooltip placement="bottom" effect="light">
			            		<div slot="content" class="fs18">{{item.testJudge}}</div>
	                            <div class="w990 text-overflow-2 cursor-pointer">{{item.testJudge}}</div>
	                        </el-tooltip>
			            	<div class="w990 color285FE3 text-underline cursor-pointer" v-if="item.itemRecordList && item.itemRecordList.length > 0" @click="lookDataRecords(item.itemRecordList)">查看</div>
			            	<div class="w990" v-else>{{item.dataTxt ? item.dataTxt : '————'}}</div>
			            	<div class="w990">{{item.recordTxt}}</div>
			            	<div class="w990">{{item.qualified ? '合格' : '不合格'}}</div>
			            	<div class="w330 color285FE3 text-underline cursor-pointer" v-if="item.attach.code == 'Y' && item.attachIds" @click="lookAttachment(1, item.attachIds)">查看</div>
			            	<div class="w330" v-else>暂无</div>
			            	<div class="w990 color285FE3 text-underline cursor-pointer" v-if="item.media.code == 'Y' && item.mediaIds" @click="lookMedias(item.mediaIds)">查看</div>
			            	<div class="w990" v-else>暂无</div>
			            	<div class="w990">{{item.operatorClient}}<br>{{item.sendDate}}</div>
			            	<div class="w990 color285FE3 text-underline cursor-pointer" v-if="item.signId" @click="lookAttachment(2, item.signId)">查看</div>
			            	<div class="w990" v-else>暂无</div>
			            	<div class="w330 color5379E6 cursor-pointer" @click="lookDetail(item, 4)">详情</div>
			            </div>
		            </div>
	            </div>
	        </div>
	    </div>
	    <ListDetail v-if="showDetail" :data="detailData" :type="detailType" @cancel="closeDetail"></ListDetail>
	    <DataRecordsView v-if="showDataRecordView" :data="dataRecordsList" @cancel="closeDataRecord"></DataRecordsView>
	</div>
</template>

<script>
import ListDetail from '@/components/ListDetail'
import DataRecordsView from '@/components/DataRecordsView'
export default {
    name: 'TestResults',
    props: {
    	modelId: Number, //型号id
    	modelName: String, //型号名称
    	deviceName: String //设备名称
    },
    components: {ListDetail, DataRecordsView},
    data () {
        return {
        	deviceNo: '', //设备编号val
        	deviceNoData: [], //设备编号数据
            modelState: '', //阶段过程val
            TestResultData: [], //试验结果数据
            listLoading: false, //列表加载中
            reportLoading: false, //下载报告加载中
            dataLoading: false, //数据导出加载中
            showDetail: false, //显示详情弹窗
            detailData: null, //详情数据
            detailType: '', //数据类型
            showDataRecordView: false, //显示数据记录
            dataRecordsList: [] //数据记录数据
        }
    },
    created() {
    	this.getEquipmentSerial();
    	this.getTestResult();
    },
    methods: {
    	// 关闭弹窗
    	cancel() {
    		this.$emit('cancel');
    	},
    	// 查询设备编号
        getEquipmentSerial() {
            let _this = this;
            let params = {
                deviceId: _this.modelId
            };
            _this.axios.getEquipmentSerial(params).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    _this.deviceNoData = res.data;
                }
            }).catch(function (error) {
                _this.$message.error(error.msg);
            });
        },
        // 下载报告
        lookReport() {
        	let _this = this;
            let params = {
                deviceId: _this.modelId
            };
            _this.reportLoading = true;
            _this.axios.downloadReport(params).then((res) => {
                if (res) {
                    let blob = new Blob([res]);
                    let fileName = '试验报告.docx';
                    let linkNode = document.createElement('a');
                    linkNode.download = fileName;
                    linkNode.style.display = 'none';
                    linkNode.href = URL.createObjectURL(blob);
                    document.body.appendChild(linkNode);
                    linkNode.click();
                    URL.revokeObjectURL(linkNode.href);
                    document.body.removeChild(linkNode);
                }
                _this.reportLoading = false;
            }).catch(function (error) {
                _this.reportLoading = false;
                _this.$message.error(error.msg);
            });
        },
        // 数据导出
        exportFile() {
            let _this = this;
            let params = {
                deviceId: _this.modelId
            }
            _this.dataLoading = true;
            _this.axios.exportData(params).then((res) => {
                if (res) {
                    let blob = new Blob([res]);
                    let fileName = '试验结果.xlsx';
                    let linkNode = document.createElement('a');
                    linkNode.download = fileName;
                    linkNode.style.display = 'none';
                    linkNode.href = URL.createObjectURL(blob);
                    document.body.appendChild(linkNode);
                    linkNode.click();
                    URL.revokeObjectURL(linkNode.href);
                    document.body.removeChild(linkNode);
                }
                _this.dataLoading = false;
            }).catch(function (error) {
            	_this.dataLoading = false;
                _this.$message.error(error.msg);
            });
        },
        // 时间戳转换
        formatDate(date) {
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let dateTime = yy + '/' + mm + '/' + dd;
            return dateTime;
        },
        // 查询试验项目结果
        getTestResult() {
            let _this = this;
            let params = {
                deviceId: _this.modelId,
                deviceNo: _this.deviceNo,
                modelState: _this.modelState
            };
            _this.listLoading = true;
            if (_this.modelState == 'DOC') {
            	_this.axios.testDocResult({
            		deviceId: _this.modelId
            	}).then((res) => {
	                console.log(res)
	                if (res.code == 200) {
	                	res.data.map((item) => {
	                		item.sendDate = _this.formatDate(item.sendDate);
	                		return item;
	                	});
	                    _this.TestResultData = res.data;
	                }
	                _this.listLoading = false;
	            }).catch(function (error) {
	            	_this.listLoading = false;
	                _this.$message.error(error.msg);
	            });
            } else {
            	_this.axios.testProjectResult(params).then((res) => {
	                console.log(res)
	                if (res.code == 200) {
	                	res.data.map((item) => {
	                		item.sendDate = _this.formatDate(item.sendDate);
	                		return item;
	                	});
	                    _this.TestResultData = res.data;
	                }
	                _this.listLoading = false;
	            }).catch(function (error) {
	            	_this.listLoading = false;
	                _this.$message.error(error.msg);
	            });
            }
        },
        /**
         * 查看附件
         * @param {Number} type - 附件或者签名
         * @param {Number} id - 附件id
         */
        lookAttachment(type, id) {
        	let _this = this;
        	let params = {
        		attachId: id
        	};
			_this.axios.downloadFile(params).then((res) => {
				console.log(res)
                if (res.status == 200) {
                	let blob = new Blob([res.data]);
                    if (type == 1) {
                    	let disposition = res.headers['content-disposition'];
                    	let fileName = disposition.substring(disposition.indexOf('Filename=') + 9, disposition.length);
                        let linkNode = document.createElement('a');
	                    linkNode.download = fileName;
	                    linkNode.style.display = 'none';
	                    linkNode.href = URL.createObjectURL(blob);
	                    document.body.appendChild(linkNode);
	                    linkNode.click();
	                    URL.revokeObjectURL(linkNode.href);
	                    document.body.removeChild(linkNode);
                    } else {
                        _this.$imageView([URL.createObjectURL(blob)])
                    }
                }
            }).catch(function (error) {
                _this.$message.error(error.msg);
            });
        },
        /**
         * 查看多媒体记录
         * @param {Number} ids - 多媒体id
         */
        lookMedias(ids) {
        	let _this = this;
        	let newIds = ids.split(',');
        	let mediaImgs = [];
        	newIds.map((item) => {
        		_this.axios.downloadFile({
        			attachId: item
        		}).then((res) => {
	                if (res.status == 200) {
	                	let blob = new Blob([res.data]);
	                    let imgUrl = URL.createObjectURL(blob);
	                    mediaImgs.push(imgUrl);
	                    if (mediaImgs.length == newIds.length) {
			        		_this.$imageView(mediaImgs);
			        	}
	                }
	            }).catch(function (error) {
	                _this.$message.error(error.msg);
	            });
        	});
        },
        /**
         * 查看详情
         * @param {Object} row - 详情数据
         * @param {Number} type - 数据类型
         */
        lookDetail(row, type) {
            this.detailData = row;
            this.detailType = type;
            this.showDetail = true
        },
        // 关闭详情弹窗
        closeDetail() {
            this.showDetail = false
        },
        /**
         * 查看数据记录
         * @param {Array} list - 数据记录列表
         */
        lookDataRecords(list) {
        	this.dataRecordsList = list;
        	this.showDataRecordView = true;
        },
        // 关闭数据记录弹窗
        closeDataRecord() {
        	this.showDataRecordView = false;
        }
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .test-results {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 1243rem;height: 746rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 25rem 0 40rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
			.content {width: 100%;padding: 15rem 40rem 0;
				.c-title {width: 100%;height: 34rem;
					.btn {width: 116rem;height: 34rem;display: flex;align-items: center;justify-content: center;border: 1px solid #316EFF;background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);border-radius: 3rem;margin-left: 20rem;cursor: pointer;
						img {width: 16rem;height: 20rem;margin-right: 6rem;}
						span {font-size: 18rem;color: #285FE3;}
					}
				}
				.theader {width: 100%;height: 36rem;background: #F4F5F8;border: 1px solid #D0D6E3;border-radius: 3rem;padding: 0 20rem;font-size: 18rem;color: #505971;margin-top: 21rem;
					div {text-align: center;}
				}
				.tbodys {width: 100%;height: 504rem;overflow-y: scroll;}
				.tbodys::-webkit-scrollbar {display: none;}
                .tbodys {scrollbar-width: none;-ms-overflow-style: none;overflow-x: hidden;overflow-y: auto;}
				.tbody {width: 100%;min-height: 60rem;border: 1px solid #D0D6E3;border-radius: 3rem;font-size: 18rem;color: #161D2E;padding: 0 20rem;margin-top: 3rem;
					div {text-align: center;}
				}
				.w330 {width: 3.3%;}
				.w875 {width: 8.75%;}
				.w990 {width: 9.9%;}
			}
		}
	}
</style>